/**
 * Created by yujianfu on 2016/11/10.
 */
import * as React from 'react'
import {Popover, Card, Table, Icon, Collapse, Button, message} from 'antd'
import {fetchPost} from '../../../../utils/request'
import styles from '../../../finance/photoCheck/common/detail/Index.less'
import Styles from '../../../finance/common/detail/Index.less'
import PhotoStyle from '../../less/Photo.less'
import Viewer from 'react-viewer'
import 'react-viewer/dist/index.css'

const Panel = Collapse.Panel

class OCR extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      userId: props.userId,
      tradeNo: props.tradeNo,
      visible: false,
      activeIndex: 0,
      record: {},
      ocrAadhaar: null,
      ocrPan: null,
      ocrFront: null,
      ocrBack: null,
      kycType: null,
      stepType: props.stepType,
    }
  }

  componentWillReceiveProps(props) {
    if (this.state.userId != props.userId || this.state.tradeNo != props.tradeNo) {
      this.setState({
        ocrAadhaar: null,
        ocrPan: null,
        userId: props.userId,
        tradeNo: props.tradeNo
      }, () => {
        this.getData()
      })
    }
  }

  componentDidMount() {
    if (this.state.userId && this.state.tradeNo) {
      this.getData()
    }
  }

  getData() {
    if (this.state.tradeNo != null) {
      fetchPost(`/user/${this.state.tradeNo}/faceRecognition/info`, {}).then(res => {
        if (res.code === 0) {
          this.setState({
              record: res.data,
            }
            ,
            () => {
              let kycFrontImageUrl = this.state.record.aadhaarFrontImage[0].key;
              let kycBackImageUrl = this.state.record.aadhaarBackImage[0].key;
              let panImageUrl = this.state.record.panImage[0].key;
              let tradeNo = this.state.tradeNo;
              let kycType = this.state.record.kycType;
              fetchPost(`/user/faceRecognition/ocr/info`, {
                kycFrontImageUrl,
                kycBackImageUrl,
                panImageUrl,
                tradeNo,
                kycType,
              }).then(res => {
                if (res.code === 0) {
                  this.setState({
                    ocrPan: res.data.ocrPan,
                    ocrFront: res.data.ocrFront,
                    ocrBack: res.data.ocrBack,
                    kycType: res.data.kycType,
                  })
                }
              })
            }
          )
        }
      })
    } else {
      this.setState({
        record: {}
      })
    }
  }

  renderOcrFront() {
    if (this.state.ocrFront == null) {
      return <span className="no-data"><Icon type='frown-o'/>No data</span>
    }

    let ocrFront = this.state.ocrFront;
    let result = [];

    ocrFront.map(item => {
      result.push(
        <div className={Styles.oneLineContent} key={Math.random().toString(16).substring(2)}>
          <span style={{width: '20%'}}>{item.key}</span>
          :
          <span style={{width: '80%', paddingLeft: 5}}>
                {item.value == null ? <span> </span> : item.value}
              </span>
        </div>
      )
    });

    return result;
  }

  renderOcrBack() {
    if (this.state.ocrBack == null) {
      return <span className="no-data"><Icon type='frown-o'/>No data</span>
    }

    let ocrBack = this.state.ocrBack;
    let result = [];

    ocrBack.map(item => {
      result.push(
        <div className={Styles.oneLineContent} key={Math.random().toString(16).substring(2)}>
          <span style={{width: '20%'}}>{item.key}</span>
          :
          <span style={{width: '80%', paddingLeft: 5}}>
                {item.value == null ? <span> </span> : item.value}
              </span>
        </div>
      )
    });

    return result;
  }

  render() {
    if (this.state.record == null) {
      return <span className="no-data"><Icon type='frown-o'/>No data</span>
    }
    let images = []
    let slf = this
    return (
      <div className={styles.detailModule}>
        <Card title={this.state.kycType == null ? 'OCR FRONT [NONE]' : ('OCR FRONT [' + this.state.kycType + ']')}
              bodyStyle={{padding: 0, minHeight: 20, overflow: 'auto'}} noHovering={true}>
          {this.renderOcrFront()}
        </Card>
        <div style={{height: '20px'}}></div>
        <Card title={this.state.kycType == null ? 'OCR BACK [NONE]' : ('OCR BACK [' + this.state.kycType + ']')}
              bodyStyle={{padding: 0, minHeight: 20, overflow: 'auto'}} noHovering={true}>
          {this.renderOcrBack()}
        </Card>
        <div style={{height: '20px'}}></div>
        <Card title="PAN Card OCR" bodyStyle={{padding: 0, maxHeight: 210, overflow: 'auto'}} noHovering={true}>
          <div className={Styles.oneLineContent}>
            <span style={{width: '20%'}}>Name</span>
            :
            <span style={{width: '80%', paddingLeft: 5}}>
                {this.state.ocrPan == null ? <span
                    style={{color: '#4876FF'}}> </span> : this.state.ocrPan.name}
              </span>
          </div>
          <div className={Styles.oneLineContent}>
            <span style={{width: '20%'}}>Father's name</span>
            :
            <span style={{width: '80%', paddingLeft: 5}}>
                {this.state.ocrPan == null ? <span
                    style={{color: '#4876FF'}}> </span> : this.state.ocrPan.fatherName}
              </span>
          </div>
          <div className={Styles.oneLineContent}>
            <span style={{width: '20%'}}>DOB</span>
            :
            <span style={{width: '80%', paddingLeft: 5}}>
                {this.state.ocrPan == null ? <span
                    style={{color: '#4876FF'}}> </span> : this.state.ocrPan.dob}
              </span>
          </div>
          <div className={Styles.oneLineContent}>
            <span style={{width: '20%'}}>PAN_NO</span>
            :
            <span style={{width: '80%', paddingLeft: 5}}>
                {this.state.ocrPan == null ? <span
                    style={{color: '#4876FF'}}> </span> : this.state.ocrPan.panNo}
              </span>
          </div>
        </Card>
        <Viewer
          visible={this.state.visible}
          onClose={() => {
            this.setState({visible: false})
          }}
          images={images}
          activeIndex={this.state.activeIndex}
        />
      </div>

    )
  }
}

export default OCR
